<!--继承公共模板-->
<extend name="Layout:jqweui"/>
<!--网页标题-->
<block name="title">申请验证</block>

<!--内部样式-->
<block name="import_head">
<link rel="stylesheet" href="__PUBLIC__/common/hr/css/weui.min.css">
<link rel="stylesheet" href="__PUBLIC__/common/hr/css/weui.css">
<link rel="stylesheet" href="__PUBLIC__/common/hr/css/jquery-weui.css">
<link rel="stylesheet" href="__PUBLIC__/common/hr/css/enter.css">
<link rel="stylesheet" href="__PUBLIC__/common/hr/css/verify.css">
</block>

<!--内部样式-->
<block name="style">
    <style>
        .weui_btn_disabled.weui_btn_default {
            color: #C9C9C9;
            border: 1px solid #C9C9C9;
        }

        .weui_btn_disabled.weui_btn_default {
            　　color: #C9C9C9;
        }

        .weui_btn_plain_primary {
            　　color: #04BE02;
            　　border: 1px solid #04BE02;
        }

        .weui_btn_disabled {
            color: rgba(255, 255, 255, .6);
        }

    </style>
</block>

<!--页面内容-->
<block name="page">
<div class="mainBox">
    <main class="main">
        <section class="section">
            <div class="weui_panel_hd">申请验证</div>
        </section>
        <section>
            <div class="weui_cell">
                <div class="weui_cell_hd">
                    <label class="weui_label">手机号</label>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" id="phone" type="number" placeholder="请输入手机号">
                </div>
            </div>
            <div class="weui_cell">
                <div class="weui_cell_hd">
                    <label class="weui_label">验证码</label>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" id="code" type="number" placeholder="请输入验证码">
                </div>
                <input class="specialBox" id="getCode" type="button" value="获取验证码">
            </div>
        </section>
        <section class="btnSubBox btn">
            <input class="btnSub" type="button" id="validate" value="马上验证"/>
        </section>
    </main>
</div>
</block>

<!--尾部引入-->
<block name="import_foot">
<script src="__PUBLIC__/common/hr/js/jquery-3.3.1.min.js"></script>
<script src="__PUBLIC__/common/hr/js/jquery-weui.min.js"></script>
<script src="__PUBLIC__/common/hr/js/swiper.min.js"></script>
<script src="__PUBLIC__/common/hr/js/city-picker.min.js"></script>
</block>

<!--js代码-->
<block name="script">
    <script>
      $(function () {
        $("#getCode").removeAttr("disabled");
        //发送验证码
        $("#getCode").click(function () {
            var pattern = $("#phone").val()
            if (pattern === '') {
                $.toptip('请输入手机号码', 'error');
                return false
            }
            if (!(/^1[3|4|5|8]\d{9}$/.test(pattern))) {
                $.toptip('手机号码输入错误', 'error');
                return false
            }
            $.ajax({
                url: "messageServlet",
                data: {
                    "phone": pattern
                },
                type: "post",
                async: false,
                dataType: "text",
                success: function (data) {
                    if (data == 'true') {
                        alert("验证码发送成功，收到后请输入验证码");
                        time(this);
                    } else {
                        alert("验证码发送失败");
                    }
                },
                error: function () {
                    alert("error");
                }
            });
        });
        //验证
        $("#validate").click(function () {
            $.ajax({
                url: "codeServlet",
                data: {
                    "code": $("#code").val()
                },
                type: "post",
                async: false,
                dataType: "text",
                success: function (data) {
                    if (data == 'true') {
                        alert("恭喜您，验证成功");
                    } else {
                        alert("验证失败");
                    }
                },
                error: function () {
                    alert("error");
                }
            });
        });
    })

    //验证码倒计时
    var wait = 60;

    function time(obj) {
        if (wait == 0) {
            $("#getCode").removeAttr("disabled");
            $("#getCode").val("获取验证码");
            wait = 60;
        } else {
            $("#getCode").attr("disabled", "true");
            $("#getCode").val(wait + "秒后重试");
            wait--;
            setTimeout(function () {		//倒计时方法
                time(obj);
            }, 1000);	//间隔为1s
        }
    }
</script>
</block>